<template>
  <view class="container">
    <uni-nav-bar
      :border="false"
      statusBar
      title="选择人员"
      left-icon="left"
      right-icon="plusempty"
      backgroundColor="transparent"
      @clickLeft="onBack"
      @clickRight="onFabClick"
    >
    </uni-nav-bar>

    <FilterView ref="filterView">
      <template #search>
        <uni-search-bar
          radius="17"
          bgColor="#fff"
          cancelButton="none"
          placeholder="搜索姓名或编号"
          v-model="queryData.searchValue"
          @confirm="onSearch"
        >
          <template v-slot:searchIcon>
            <uni-icons
              color="#999999"
              size="18"
              type="search"
              @click="onSearch"
            />
          </template>
        </uni-search-bar>
      </template>
      <template #form>
        <uni-forms
          ref="filterForm"
          v-model="queryData"
          label-position="top"
          label-width="150"
        >
          <uni-row :gutter="26">
            <uni-col :span="24">
              <uni-forms-item label="所在部门" name="deptId">
                <uni-data-picker
                  placeholder="请选择部门"
                  popup-title="请选择部门"
                  :map="{
                    text: 'label',
                    value: 'id',
                  }"
                  :localdata="deptData"
                  v-model="queryData.deptId"
                />
              </uni-forms-item>
            </uni-col>
          </uni-row>
        </uni-forms>
      </template>
      <template #footer>
        <view class="filterBtn">
          <button class="btn r" type="primary" @click="onReset">重置</button>
          <button class="btn s" type="primary" @click="onSure('filterForm')">
            确定
          </button>
        </view>
      </template>
    </FilterView>

    <view class="listBox">
      <view class="box">
        <list-scroll-view
          :ref="'scrollView0'"
          :api="getLaundryList"
          :init="{}"
          :refresherEnabled="enabled"
        >
          <template v-slot:list="{ data }">
            <uni-list>
              <uni-list-item
                v-for="(item, i) in data"
                :key="i"
                :title="item.personnelName"
                :note="item.deptName"
                showArrow
                :thumb="item.urlPublic || '/static/common/avatar01.png'"
                thumb-size="lg"
                :rightText="item.clothCode"
                clickable
                @click="onClick(item)"
              >
              </uni-list-item>
            </uni-list>
          </template>
          <template #empty>
            <view class="uni-nodata">暂无数据!</view>
          </template>
        </list-scroll-view>
      </view>
    </view>

    <uni-fab
      ref="fab"
      horizontal="right"
      :popMenu="false"
      @fabClick="onFabClick"
    />
  </view>
</template>

<script>
import { getDeptTreeList } from '@/api/index';
import { getLaundryList } from '@/api/laundry';
import _ from 'lodash';
import FilterView from '@/components/FilterView/index.vue';
import ListScrollView from '@/components/ListScrollView/index.vue';
export default {
  components: {
    FilterView,
    ListScrollView,
  },
  data() {
    return {
      enabled: true,
      deptData: [],
      queryData: {},
      // api
      getLaundryList,
    };
  },
  onLoad(query) {
    this.initData();
  },
  onShow() {
    this.$nextTick(() => {
      this.$refs[`scrollView0`].getData(true);
    });
  },
  methods: {
    // 初始数据
    initData() {
      getDeptTreeList().then((res) => {
        this.deptData = res.data;
      });
    },
    // 跳转
    onClick(e) {
      // url参数
      let obj = {
        phone: e.phone,
        clothCode: e.clothCode,
        personnelName: e.personnelName,
      };
      let str = this.$util.jsonToUrlParam(obj);
      this.onLocation(`/pages/laundry/formRegister?${str}`);
    },
    onFabClick() {
      this.onLocation('/pages/laundry/formRegister');
    },
    // 搜索
    onSure(ref) {
      this.$refs[ref]
        .validate()
        .then((res) => {
          this.$refs[`scrollView0`].searchData(this.queryData);
          this.$refs.filterView.onClose();
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    onReset() {
      this.queryData = this.$options.data().queryData;
    },
    onSearch(e) {
      this.$refs[`scrollView0`].searchData(this.queryData);
    },
    // 跳转页面
    onLocation(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: linear-gradient(180deg, #d7e4fd 0%, #fff 50%);
  position: relative;
  display: flex;
  flex-direction: column;
  :deep(.uni-searchbar) {
    padding: 0;
  }
  :deep(.uni-forms) {
    .uni-forms-item__label {
      font-size: 28rpx;
      font-weight: 600;
      color: #333333;
    }
    .uni-easyinput__content {
      background: #f5f5f5 !important;
      .uni-easyinput__content-input {
        height: 33px;
      }
    }
    .uni-select {
      background: #f5f5f5;
    }
    .uni-date-x {
      background: #f5f5f5;
    }
    .uni-data-tree {
      background: #f5f5f5;
    }
  }
  .filterBtn {
    display: flex;
    align-items: center;
    .r {
      background: #6bb0ff;
      border-radius: 70rpx 0rpx 0rpx 70rpx;
    }
    .s {
      background: #5293ff;
      border-radius: 0rpx 70rpx 70rpx 0rpx;
    }
    .btn {
      width: 50%;
      font-size: 28rpx;
      color: #ffffff;
      margin: 0;
      &::after {
        border: none;
      }
    }
  }
  .listBox {
    flex: 1 1 auto;
    position: relative;
    margin: 0 36rpx 0;
    padding: 24rpx;
    background: #ffffff;
    border-radius: 20rpx;
    :deep(.uni-list-item__icon-img) {
      border-radius: 8rpx;
    }
    .box {
      width: calc(100% - 48rpx);
      height: calc(100% - 48rpx);
      position: absolute;
      top: 0;
    }
  }
}
</style>
